<template>
  <div class="question_contanier">
    <!-- 题目信息 -->
    <div class="quesetion-info">
      <el-row>
        <el-col :span="6">
          <span v-if="currentQuestion.questionType==='1'">【题型】：单选题</span>
          <span v-else-if="currentQuestion.questionType==='2'">【题型】：多选题</span>
          <span v-else>【题型】：简答题</span>
        </el-col>
        <el-col :span="6">
          <span>【编号】：{{currentQuestion.id}}</span>
        </el-col>
        <el-col :span="6">
          <span v-if="currentQuestion.difficulty==='1'">【难度】：简单</span>
          <span v-else-if="currentQuestion.difficulty==='2'">【难度】：中等</span>
          <span v-else>【难度】：困难</span>
        </el-col>
        <el-col :span="6">
          <span>【标签】：{{currentQuestion.tags}}</span>
        </el-col>
      </el-row>
      <el-col :span="6">
        <span>【学科】：{{currentQuestion.subjectName}}</span>
      </el-col>
      <el-col :span="6">
        <span>【目录】：{{currentQuestion.directoryName}}</span>
      </el-col>
      <el-col :span="6">
        <span>【方向】：{{currentQuestion.direction}}</span>
      </el-col>
      <el-col :span="6"></el-col>
      <el-row>

      </el-row>
    </div>
    <hr>
    <!-- 题干 -->
    <div class="question-body">
      <el-row>
        <span>【题干】：</span>
      </el-row>
      <el-row>
        <pre class="quest-body" v-html="currentQuestion.question">
        </pre>
      </el-row>
      <!-- 单选 -->
      <div class="Single-choice" v-if="currentQuestion.questionType === '1' && currentQuestion.options">
        <el-row>
          <span class="quest-title">
            单选题 选项：（以下选中的选项为正确答案）
          </span>
        </el-row>
        <el-row v-for="(obj,index) in currentQuestion.options" :key="index" class="check-item">
          <el-radio :label="index" v-model="Singlechoice">{{obj.title}}</el-radio>
        </el-row>
      </div>
      <!-- 多选 -->
      <div class="Multiple-choice" v-else-if="currentQuestion.questionType==='2'&&currentQuestion.options">
        <el-row>
          <span class="
        quest-title">
            多选题 选项：（以下选中的选项为正确答案）
          </span>
        </el-row>
        <el-checkbox-group v-model="checkList">
          <el-row v-for="obj in this.currentQuestion.options" :key="obj.id" class="check-item">
            <el-checkbox :label="obj.id">{{obj.title}}</el-checkbox>
          </el-row>
        </el-checkbox-group>
      </div>
    </div>
    <hr>
    <!-- 参考答案 -->
    <div class="vedio-anwser">
      <span>【参考答案】：</span>
      <el-button type="danger" size="masll" @click="showFn">视频答案预览</el-button>
      <!-- 视频 -->
      <div class="video" v-if="isVedioShow">
        <video :src="currentQuestion.videoURL" autoplay controls></video>
      </div>
    </div>
    <hr>
    <!-- 答案解析 -->
    【答案解析】：
    <div class="answer" v-html="currentQuestion.answer">
    </div>
    <hr>
    【题目备注】：
    <div class="answer" v-html="currentQuestion.remarks">
    </div>
  </div>
</template>

<script>
export default {
  name: 'questions-preview',
  props: {
    currentQuestion: {
      type: Object,
      require: true
    },
    isVedioShow: {
      type: Boolean,
      require: true
    }
  },
  data () {
    return {
      // 单选题目正确选项
      Singlechoice: null,
      // 单选题目正确选项
      checkList: []
    }
  },
  methods: {
    showFn () {
      this.$emit('changeVedioShow')
    },
    getChoice () {
      if (this.currentQuestion.questionType === '1') {
        if (this.currentQuestion.options.length !== 0) {
          this.Singlechoice = this.currentQuestion.options.findIndex(item => item.isRight === 1)
        }
      } else if (this.currentQuestion.questionType === '2') {
        if (this.currentQuestion.options.length !== 0) {
          this.checkList = this.currentQuestion.options.filter(item => item.isRight === 1).map(item => item.id)
        }
      }
    }
  },
  computed: {},
  watch: {
    currentQuestion: {
      deep: true,
      handler () {
        this.getChoice()
      }
    }
  },
  filters: {},
  components: {},
  created () {
    this.getChoice()
  },
  mounted () { }
}
</script>

<style scoped lang='less'>
.question_contanier {
  .quesetion-info {
    .el-col {
      padding: 10px 0;
      span {
        font-style: 14px;
        color: rgb(96, 98, 102);
      }
    }
  }
  .question-body {
    .quest-body {
      color: blue;
    }
    .Single-choice {
      .quest-title {
        color: #606266;
        font-size: 14px;
      }
      .check-item {
        margin: 16px 0;
      }
    }
    .Multiple-choice {
      .check-item {
        margin: 16px 0;
      }
    }
  }
  .vedio-anwser {
    .video {
      width: 400px;
      height: 300px;
      video {
        width: 100%;
        height: 100%;
      }
    }
  }
  .answer {
    display: inline-block;
  }
}
</style>
